<template>
  <section style="min-width:1300px">
    <enHeader :bannerList="list.bannerList"></enHeader>
    <div class="container">

      <div class="text"
           :class="['text',{'textUrl':!!textUrl}]"
           @click="textUrlTo">
        {{list.serviceShow}}
        <!-- <div class="circle">

        </div>
        <img src="./../../image/pic5.png"
             alt=""
             srcset=""> -->
      </div>
      <div class="des">
        <div class="d1">
          <div class="imgicon">
            <img src="./../../image/pic15.png"
                 width="100%"
                 alt=""
                 srcset="">
          </div>
          <div class="word">
            <p class="p1">Ruili Bank APP</p>
            <p class="p2">Face Recognition Technology Enhances Account Security,Mobile Financial Services Security, Portability and Efficiaency</p>
            <p class="p1 pointer"><a style="color:black"
                 :href="appUrl">More >></a></p>
          </div>
        </div>
        <div class="d1">
          <div class="imgicon">
            <img src="./../../image/pic14.png"
                 width="100%"
                 alt=""
                 srcset="">
          </div>
          <div class="word">
            <p class="p1">Corporate Bank</p>
            <p class="p2">Financial services tailored for enterprises
            </p>
            <p class="p1 pointer"
               style="margin-top:56px"><a style="color:black"
                 :href="bankUrl">More >></a></p>
          </div>
        </div>
      </div>
    </div>
    <swiper :options="swiperOption"
            ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="(item , i) in list.screenTwo"
                    :key="i">
        <template v-if="item.linkUrl">
          <div class="btnText"><a :href="item.linkUrl">
              <p class="mp1"
                 v-if="item.textInfo">{{item.textInfo}}</p>
              <img :src="item.url"
                   alt=""
                   srcset="">
            </a></div>

        </template>
        <template v-else>
          <div class="btnText">
            <p class="mp1"
               v-if="item.textInfo">{{item.textInfo}}</p>
            <img :src="item.url"
                 alt=""
                 srcset="">
          </div>

        </template>

      </swiper-slide>

      <!-- Optional controls -->
      <div class="swiper-button-prev"
           slot="button-prev"></div>
      <div class="swiper-button-next"
           slot="button-next"></div>
    </swiper>
    <enFooter></enFooter>
  </section>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "home",
  data () {
    return {
      books: "Home",
      activeIndex: "1",
      list: {
        bannerList: []
      },
      textUrl: "",
      bankUrl: "",
      appUrl: "",
      swiperOption: {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 50,
        loopedSlides: 1,
        autoplay: true,
        disableOnInteraction: false,
        roundLengths: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      }
    };
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  created () {
    this.getHomePageById()
  },
  methods: {
    textUrlTo () {
      if (this.textUrl) {
        window.location.href = this.textUrl
      }
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath);
    },
    getHomePageById () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.getHomePageById,
          mode: "post",
          data: {

          }
        },
        function (suc) {
          self.list = suc.data
          self.list.bannerList = JSON.parse(self.list.bannerList) || []
          self.list.screenTwo = JSON.parse(self.list.screenTwo)
          self.textUrl = suc.data.serverUrl
          self.appUrl = suc.data.appUrl
          self.bankUrl = suc.data.bankUrl
        },
        function (err) {

        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.prefn1,
.nextfn1 {
  width: 45px;
  height: 58px;
  position: absolute;
  top: 202px;
  z-index: 120;
  cursor: pointer;
}
.prefn1 {
  left: 37px;
}
.nextfn1 {
  right: 43px;
}
.pointer {
  cursor: pointer;
}
.des {
  width: 100%;
  height: 550px;
  box-sizing: border-box;
  padding: 150px 6.25% 0 6.25%;
  display: flex;
  flex-direction: row;
  .d1 {
    width: 50%;
    display: flex;
    flex-direction: row;
    .imgicon {
      width: 37.5%;
      display: flex;
      align-items: center;
      margin-right: 15%;
      height: 250px;
    }
    .word {
      width: 29.79%;
      color: black;
      padding-top: 38px;
    }
    .p1 {
      font-size: 24px;
      font-weight: 600;
    }
    .p2 {
      margin: 30px 0;
      font-size: 18px;
    }
  }
}
.text {
  height: 70px;
  font-size: 24px;
  text-align: center;
  line-height: 70px;
  background: rgba(115, 0, 0, 1);
  color: white;
  margin-top: 10px;
  position: relative;
  img {
    width: 20px;
    height: 33px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
  }
}
.circle {
  width: 80px;
  height: 80px;
  background: rgba(115, 0, 0, 1);
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
}
.textUrl {
  cursor: pointer;
}
.container {
  margin-top: 15px;
}
.swiper-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.swiper-wrapper {
  li {
    margin-right: 90px;
    margin-left: 17px;
    float: left;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.btnText {
  transition: all 0.7s ease 0s;
  position: relative;
  height: 310px;
  a {
    color: white;
  }
  .mp1 {
    width: 100%;
    top: -12%;
    font-size: 18px;
    text-align: center;
    position: absolute;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mp2 {
    position: absolute;
    width: 100%;
    top: 61%;
    font-size: 27px;
    text-align: center;
    color: white;
  }
}

.swiper-slide {
  margin-right: 90px;
  height: 310px;
  padding-top: 38px;
}
.swiper-button-prev,
.swiper-button-next {
  top: 235px;
  width: 31px;
  height: 64px;
  background-size: cover;
}
.swiper-button-prev {
  left: 50px;
  background: url("./../../image/pic7.png") center no-repeat;
}
.swiper-button-next {
  right: 50px;
  background: url("./../../image/pic10.png") center no-repeat;
}
</style>